
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lagne.tk</title>
</head>


<body>

<p align="center">
<font size="14">
<b>لجنـــــ.تك</b><br>
<b>Lagne.tk</b><br>
</font>
</p>

<p align="center">
<table width="100%">
<tbody><tr width="100%">
	<td width="100%" align="center">
		<div id="d4" width="100%"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/north.png"><img src="./Lagnetk_files/tip.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><table><tbody><tr><td><img src="./Lagnetk_files/shot_1.png"></td><td><img src="./Lagnetk_files/shot_2.png"></td><td><img src="./Lagnetk_files/shot_3.png"></td></tr><tr><td align="center"><font color="white">Initial View</font></td><td align="center"><font color="white">Canvas View</font></td><td align="center"><font color="white">About View</font></td></tr></tbody></table></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div>
	</td>
</tr>
</tbody></table>
<br>
I'm trying to make the Android App as fast as possible, it doesn't wait for the users to ask for the Map to start detecting their locations ,instad, the App starts the location-Listener as soon as it starts..so that,when it recieves the response about the voting place it will be ready to show the driving map when the users zoom on the PIN circle or node in the Canvas...
<br>

<br>
The Android App source code is divided among few Java classes files:
<table border="1">
<tbody><tr align="center">
	<td>Class name</td>
	<td>Breif description</td>
</tr>
<tr>
	<td>CanvasView</td>
	<td>SurfaceView class for drawing the canvas, creates the CanvasThread ,waits till it dies &amp; has the touch screen event listeners</td>
</tr>
<tr>
	<td>ElectionsActivity</td>
	<td>The main Activity of the App , the very first things the App does which is running the LocationListener,Google Analytics, creating the CanvasView and displaying it in the screen!</td>
</tr>
<tr>
	<td>CanvasThread</td>
	<td>A thread that runs seperately outside the canvas, work as a timer or Animator to update the canvas from time to time.</td>
</tr>
<tr>
	<td>URLThread</td>
	<td>A thread that runs seperately outside before loading the canvas, makes a GET request and notifies the main activity (ElectionsActivity) by setting the "isResponseRvcd" flag.<br>Currently, it recieves a fixed response from <a href="http://yoga1290.awardspace.info/lagne.tk/getResponse.php">getResponse.php</a> (data used in the presentation), as my free-hosting plan doesn't currently allow making external requests.</td>
</tr>
</tbody></table>
<br>
</p>
When the App starts, ElectionActivity is activated. It shows a Text box and a button for ID entry before showing the animated CanvasView:
<p align="center">
<img src="./Lagnetk_files/activity.png">
</p>

<table width="100%">
	<tbody><tr align="center">
		<td align="center">
			<div id="canvas_view"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/shot_2.png"></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"><img src="./Lagnetk_files/tipD.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div>
		</td>
	</tr>
	<tr align="center">
		<td align="center">
			The CanvasView
		</td>
	</tr>
</tbody></table>

<p align="center">

<table>
<tbody><tr>
<td><div id="pin_view"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/pin.png"></font></td><td align="left" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/tipR.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
<td>when touched, it re-directs the user to driving map from the last detected location to the voting location (users will be asked to continue actions on Google Maps or browser)</td>
</tr>
</tbody></table>

<table>
<tbody><tr>
<td>when touched, it re-directs the user to the About view, telling the users that this App uses <b>Google Analytics</b> for statistics and it's open-source.</td>
<td><div id="about_view"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/tipL.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/profile.png"></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
</tr>
</tbody></table>

<table>
<tbody><tr>
<td><div id="ws_view"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/small_website.png"></font></td><td align="left" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/tipR.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
<td>when touched, it re-directs the user to the official <a href="http://elections.eg/">Elections.eg</a> website.</td>
</tr>
</tbody></table>

</p>




<p align="center">
<font size="30">
<b>How the Canvas &amp; Animations work:</b></font>
<br>
<img src="./Lagnetk_files/CanvasThread_flowchart.png">
<br>
<img src="./Lagnetk_files/CanvasView_flowchart.png">
</p>



<p align="center">
<table width="100%">
	<tbody><tr align="center">
		<td align="center">
			<font size="14">
				<b>لجنـــــ.تك</b>
			</font>
		</td>
	</tr>
	<tr align="center">
		<td align="center">
			<font size="14">
				<a href="http://lagne.tk/">Lagne.tk</a> (The website)
			</font>
		</td>
	</tr>
	<tr align="center">
		<td align="center">
			<div id="lagnetk_view"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/north.png"><img src="./Lagnetk_files/tip.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/lagnetk.png"></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div>
		</td>
	</tr>
</tbody></table>
</p>


<p align="center">

<table>
<tbody><tr>
<td>Link to the <a href="http://lagnetk.googlecode.com/files/Elections.apk">Android App</a> (downloads from the GoogleCode site)</td>
<td><div id="lagnetk_link1"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/tipL.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/ninjanoid.png"></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
</tr>
</tbody></table>

<table>
<tbody><tr>
<td><div id="lagnetk_link2"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/ccbysa.png"></font></td><td align="left" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/tipR.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
<td>Indecating this project is open-source &amp; you are free to check codes!</td>
</tr>
</tbody></table>

<table>
<tbody><tr>
<td>Re-directs to the <a href="http://lagnetk.googlecode.com/">Google-Code site</a></td>
<td><div id="lagnetk_link3"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/tipL.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/googlecode.png"></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
</tr>
</tbody></table>

<table>
<tbody><tr>
<td><div id="lagnetk_link4"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/githubcat.png"></font></td><td align="left" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/tipR.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
<td>Re-directs to the codes on <a href="http://github.com/yoga1290/lagne.tk">gitHUB</a></td>
</tr>
</tbody></table>


<table>
<tbody><tr>
<td>Redirects to the my <a href="http://about.me/yoga1290">About.me</a> page</td>
<td><div id="lagnetk_link5"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="right" valign="bottom" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/c1.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/north.png"></td><td align="left" valign="bottom" background="./Lagnetk_files/east.png"><img src="./Lagnetk_files/c2.png"></td></tr><tr><td align="right" background="./Lagnetk_files/west.png"><img src="./Lagnetk_files/tipL.png"></td><td align="center" background="./Lagnetk_files/bg.png"><font color="white"><img src="./Lagnetk_files/ws_about.png"></font></td><td align="left" background="./Lagnetk_files/east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="./Lagnetk_files/c3.png"></td><td align="center" valign="bottom" background="./Lagnetk_files/south.png"></td><td align="left" valign="bottom"> <img src="./Lagnetk_files/c4.png"></td></tr></tbody></table></div></td>
</tr>
</tbody></table>

</p>

<p align="center">
<table><tbody><tr><td>
<h2>Future plans:</h2>
<ul>
  <li>Publish in Android Market (<a href="https://play.google.com/store">Google Play store</a>)</li><br>
  <li>Move the Lagne.tk to a paid hosting plan: <br> since Lagne.tk is on a free-hosting plan which doesn't support making external requests (requests to other sites)</li><br>
  <li>Sponsor &amp; Advertising:<br>I don't have any sponsors and my App will not show any advertising!</li><br>
</ul>
</td></tr></tbody></table>
</p>
</body></html>
